<template>
  <view class="order-detail">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 订单内容 -->
    <view v-else>
    <view class="payment-reminder">
      <!-- 状态一：未付款状态 -->
      <view v-if="orderStatus === 'unpaid'">
        <!-- 支付提醒与操作区 -->
        <view class="reminder-text">请在五分钟内完成支付，过时订单将会自动取消!</view>
        <view class="action-buttons">
          <view class="button1">
            <button
              type="default" 
              @click="cancelOrder"
              class="button11">
              取消订单
            </button>
          </view>
          <view class="button2">
            <button
              type="default" 
              @click="payNow"
              class="button22">
              立即支付
            </button>
          </view>
        </view>
      </view>

		<!-- 订单状态 -->
		<view class="status-section">
			<view class="status-icon">{{ getStatusIcon(orderDetail.status) }}</view>
			<view class="status-text">{{ getStatusText(orderDetail.status) }}</view>
			<view class="status-desc">{{ getStatusDesc(orderDetail.status) }}</view>
		</view>

      <!-- 状态三：待配送状态 -->
      <view v-if="orderStatus === 'pending'">
        <!-- 配送/取餐号区（展示同一数据：queueNum） -->
        <view class="delivery-text">{{ getDeliveryLabel() }}: {{ orderInfo.queueNum }}</view>
      </view>
        
      <!-- 支付状态区 -->
      <view class="payment-status">
        <text class="status-text">{{ getStatusText() }}</text>
      </view>
        
      <!-- 联系客服区 -->
      <view v-if="orderStatus === 'unpaid' || orderStatus === 'cancelled'" class="contact-service">
        <button 
          type="default" 
          size="medium" 
          @click="contactService"
          class="button3">
          联系客服
        </button>
      </view>
		
      <!-- 联系商家与取消订单区 -->
      <view v-if="orderStatus === 'pending'" class="contact-service2">
        <button 
          type="default" 
          size="medium" 
          @click="cancelOrder"
          class="button4">
          取消订单
        </button>
        <button
          type="default" 
          size="medium" 
          @click="contactService2"
          class="button3">
          联系商家
        </button>
      </view>
    </view>

		<!-- 商品信息 -->
		<view class="product-section">
			<view class="product-item">
				<view class="product-info">
					<text class="product-name">{{ orderDetail.productName }}</text>
					<text class="product-spec" v-if="orderDetail.productSpec">{{ orderDetail.productSpec }}</text>
				</view>
				<view class="product-quantity">x{{ orderDetail.quantity }}</view>
				<view class="product-price">¥{{ orderDetail.totalPrice }}</view>
			</view>
		</view>

    <!-- 订单详细信息区 -->
    <view class="order-info-card">
      <view class="order-header">
        <text class="order-number">订单号: {{ orderInfo.orderNo }}</text>
        <text class="order-time">{{ orderInfo.createTime }}</text>
      </view>
      
      <!-- 商品列表 -->
      <view v-for="(goods, index) in orderGoods" :key="goods.orderGoodsId" class="product-info">
        <view class="product-detail">
          <view class="product-name">{{ goods.goodsName }}</view>
          <view class="product-desc">{{ getGoodsSpecText(goods.specs) }}</view>
		  <text class="shipping-label">包装费</text>
        </view>
		<view class="quantity-con">
			<text class="quantity">x{{ goods.goodsNum }}</text>
		</view>
        <view class="product-price">
          <text class="price">¥{{ goods.subtotal }}</text>
		  <text class="shipping-price">¥{{ goods.wrapFees }}</text>
        </view>
      </view>
      
      <!-- 如果没有商品数据，显示默认信息 -->
      <view v-if="orderGoods.length === 0" class="product-info">
        <view class="product-detail">
          <view class="product-name">{{ orderInfo.product.name }}</view>
          <view class="product-desc">{{ orderInfo.product.desc }}</view>
		  <text class="shipping-label">运费</text>
        </view>
		<view class="quantity-con">
			<text class="quantity">x{{ orderInfo.product.quantity }}</text>
		</view>
        <view class="product-price">
          <text class="price">¥{{ orderInfo.product.price }}</text>
		  <text class="shipping-price">¥{{ orderInfo.shipping }}</text>
        </view>
      </view>
      
      <view class="total-info">
        <text class="total-label">共{{ getTotalQuantity() }}件商品</text>
        <view class="total-price">
          <text class="total-text">券后实付</text>
          <text class="total-amount">¥{{ orderInfo.total }}</text>
        </view>
      </view>
    </view>

    <!-- 支付方式区 -->
    <view class="payment-method-card">
      <view class="method-item">
        <text class="method-label">支付方式</text>
        <text class="method-value">{{ orderInfo.paymentMethod }}</text>
      </view>
    </view>

    <!-- 收货地址区 -->
    <view class="address-card">
      <view class="address-item">
        <text class="address-label">收货地址</text>
        <view class="address-content">
          <view class="address-text">{{ orderInfo.address.detail }}</view>
          <view class="contact-info">{{ orderInfo.address.contact }} {{ orderInfo.address.phone }}</view>
        </view>
      </view>
    </view>
    </view>
  </view>
</template>

<script>
import { get, put } from '@/utils/request'

export default {
  name: 'OrderDetail',
  data() {
    return {
      // 客服电话号码
      servicePhone: '400-123-4567',
      // 商家手机号
      merchantPhone: '138-8888-8888',
      // 订单ID（从URL参数获取）
      orderId: '',
      // 订单状态：'unpaid'未付款, 'cancelled'已取消, 'pending'待配送
      orderStatus: 'unpaid',
      // 加载状态
      loading: true,
      // 订单商品列表（包含规格信息）
      orderGoods: [],
      orderInfo: {
        orderNo: '',
        createTime: '',
        status: '',
        deliveryType: null, // 配送方式(1-配送 2-自提)
        queueNum: '', // 取餐号/配送号
        shopId: '', // 店铺ID，用于生成取餐号
        userId: '', // 用户ID，用于生成取餐号
        product: {
          name: '',
          desc: '',
          quantity: 1,
          price: 0
        },
        shipping: 0,
        total: 0,
        paymentMethod: '',
        address: {
          detail: '',
          contact: '',
          phone: ''
        }
      }
    }
  },
  onLoad(option) {
    // 临时测试：直接设置orderId为1
    this.orderId = 1
    this.getOrderDetail()
    
    // 后续正式版本使用下面的代码：
    // // 获取传递的orderId参数
    // if (option.orderId) {
    //   this.orderId = option.orderId
    //   this.getOrderDetail()
    // } else {
    //   uni.showToast({
    //     title: '订单ID不能为空',
    //     icon: 'error'
    //   })
    //   setTimeout(() => {
    //     uni.navigateBack()
    //   }, 1500)
    // }
  },
  methods: {
    // 获取订单详情
    async getOrderDetail() {
      try {
        this.loading = true
        uni.showLoading({
          title: '加载中...'
        })
        
        // 1. 获取订单基本信息
        const orderResponse = await get(`/order/orders/${this.orderId}`)
        console.log('订单基本信息:', orderResponse)
        
        if (orderResponse.code !== 200 || !orderResponse.data) {
          uni.showToast({
            title: orderResponse.msg || '获取订单详情失败',
            icon: 'error'
          })
          return
        }
        
        // 2. 获取订单商品信息
        const goodsResponse = await get('/order/orderGoods/list', { orderId: this.orderId })
        console.log('订单商品信息:', goodsResponse)
        
        let orderGoods = []
        if (goodsResponse.code === 200 && goodsResponse.rows) {
          orderGoods = goodsResponse.rows
        }
        
        // 3. 获取每个商品的规格信息
        const goodsWithSpecs = []
        for (let goods of orderGoods) {
          const specResponse = await get('/order/orderGoodsSpec/list', { 
            orderId: this.orderId, 
            goodsId: goods.goodsId 
          })
          console.log(`商品${goods.goodsId}规格信息:`, specResponse)
          
          let specs = []
          if (specResponse.code === 200 && specResponse.rows) {
            specs = specResponse.rows
          }
          
          goodsWithSpecs.push({
            ...goods,
            specs: specs
          })
        }
        
        // 4. 获取收货地址信息
        let addressInfo = null
        if (orderResponse.data.addressId) {
          const addressResponse = await get(`/order/address/${orderResponse.data.addressId}`)
          console.log('收货地址信息:', addressResponse)
          
          if (addressResponse.code === 200 && addressResponse.data) {
            addressInfo = addressResponse.data
          }
        }
        
        // 4.1 获取商家电话（shop -> business），并加入更稳妥兜底与日志
        try {
          const od = orderResponse.data || {}
          let businessTel = ''
          let shopTel = ''
          if (od.shopId) {
            const shopRes = await get(`/order/shop/${od.shopId}`)
            console.log('店铺信息:', shopRes)
            if (shopRes.code === 200 && shopRes.data) {
              shopTel = shopRes.data.shopTel || ''
              const businessId = shopRes.data.businessId
              if (businessId) {
                const bizRes = await get(`/order/business/${businessId}`)
                console.log('商家信息:', bizRes)
                if (bizRes.code === 200 && bizRes.data) {
                  businessTel = bizRes.data.businessTel || ''
                }
              }
            }
          }
          const finalPhone = businessTel || shopTel || od.obligatePhone || this.merchantPhone
          this.merchantPhone = finalPhone
          console.log('最终商家电话:', this.merchantPhone)
        } catch (e) {
          console.warn('获取商家电话失败', e)
        }

        // 5. 更新订单信息
        this.updateOrderInfo(orderResponse.data, goodsWithSpecs, addressInfo)
        
      } catch (error) {
        console.error('获取订单详情失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'error'
        })
      } finally {
        this.loading = false
        uni.hideLoading()
      }
    },
    
    // 更新订单信息
    updateOrderInfo(orderData, goodsWithSpecs = [], addressInfo = null) {
      // 映射订单状态：1-待支付 2-待发货 3-待配送 4-配送中 5-已完成 6-已取消 7-售后处理中
      const statusMap = {
        1: 'unpaid',     // 待支付
        2: 'pending',    // 待发货
        3: 'pending',    // 待配送
        4: 'pending',    // 配送中
        5: 'completed',  // 已完成
        6: 'cancelled',  // 已取消
        7: 'pending'     // 售后处理中
      }
      
      this.orderStatus = statusMap[orderData.orderStatus] || 'unpaid'
      
      // 映射支付方式：1-微信支付 2-支付宝 3-其他
      const payTypeMap = {
        1: '微信支付',
        2: '支付宝',
        3: '其他支付方式'
      }
      
      // 默认商品信息（当没有商品数据时显示）
      let productInfo = {
        name: '暂无商品信息',
        desc: '',
        quantity: 0,
        price: 0
      }
      
      this.orderInfo = {
        orderNo: orderData.orderNo || '',
        createTime: orderData.orderCreateTime || orderData.payTime || '',
        status: this.getStatusText(),
        deliveryType: orderData.deliveryType ?? null,
        queueNum: orderData.queueNum || '',
        shopId: orderData.shopId || '',
        userId: orderData.userId || '', // 保存用户ID
        product: productInfo,
        shipping: orderData.deliveryFees || 0,
        total: orderData.realPrice || 0,
        paymentMethod: payTypeMap[orderData.payType] || '微信支付',
        address: this.formatAddressInfo(addressInfo, orderData)
      }
      
      // 存储完整的商品列表，以备后续使用
      this.orderGoods = goodsWithSpecs
    },
    
    // 获取状态文本
    getStatusText() {
      const statusMap = {
        'unpaid': '未付款',
        'cancelled': '已取消',
        'pending': '待配送',
        'completed': '已完成'
      }
      return statusMap[this.orderStatus] || '未知状态'
    },

    // 获取配送号/取餐号标签
    getDeliveryLabel() {
      // 1-配送 2-自提，其它情况默认“取餐号”
      return this.orderInfo.deliveryType === 1 ? '配送号' : '取餐号'
    },
    
    // 获取商品规格文本
    getGoodsSpecText(specs) {
      if (!specs || specs.length === 0) {
        return ''
      }
      return specs.map(spec => spec.specTypesName).join(', ')
    },
    
    // 计算商品总数量
    getTotalQuantity() {
      if (this.orderGoods.length === 0) {
        return this.orderInfo.product.quantity || 0
      }
      return this.orderGoods.reduce((total, goods) => {
        return total + (goods.goodsNum || 0)
      }, 0)
    },
    
    // 格式化地址信息
    formatAddressInfo(addressInfo, orderData) {
      if (addressInfo) {
        // 拼接完整地址：省 + 市 + 区 + 详细地址
        const fullAddress = [
          addressInfo.addressProvince,
          addressInfo.addressCity, 
          addressInfo.addressTown,
          addressInfo.addressDetail
        ].filter(item => item).join('')
        
        return {
          detail: fullAddress,
          contact: addressInfo.receiverName || '',
          phone: addressInfo.receiverTel || ''
        }
      } else {
        // 如果没有地址信息，使用订单中的预留信息
        return {
          detail: orderData.shopAddress || '暂无收货地址',
          contact: '',
          phone: orderData.obligatePhone || ''
        }
      }
    },
    async cancelOrder() {
      uni.showModal({
        title: '温馨提示',
        content: '确定取消这个订单吗？',
        cancelText: '返回',
        confirmText: '确认取消',
        success: async (res) => {
          if (!res.confirm) return
          try {
            // 订单状态改为6（已取消），完成时间设为当前
            const completeTime = this.formatDateTime(new Date())
            const updateData = {
              orderId: this.orderId,
              orderStatus: 6,
              orderCompleteTime: completeTime
            }
            const resp = await this.updateOrderStatus(updateData)
            if (resp.code === 200) {
              // 本地同步状态并刷新详情
              this.orderStatus = 'cancelled'
              this.getOrderDetail()
              uni.showToast({ title: '订单已取消', icon: 'success' })
            } else {
              uni.showToast({ title: resp.msg || '取消失败', icon: 'error' })
            }
          } catch (e) {
            console.error('取消订单失败:', e)
            uni.showToast({ title: '取消失败，请重试', icon: 'error' })
          }
        }
      })
    },
    payNow() {
      // 显示支付方式选择弹窗
      uni.showActionSheet({
        itemList: ['微信支付', '平台积分支付'],
        success: (res) => {
          const index = res.tapIndex
          if (index === 0) {
            // 微信支付
            this.processPayment('微信支付')
          } else if (index === 1) {
            // 平台积分支付
            this.processPayment('平台积分支付')
          }
        }
      })
    },
    async processPayment(paymentMethod) {
      try {
        uni.showToast({
          title: `正在使用${paymentMethod}...`,
          icon: 'loading'
        })
        
        // 生成取餐号（6位数，与用户和店铺相关）
        const queueNum = this.generateQueueNumber()
        const payTime = this.formatDateTime(new Date())
        const estimateTime = this.formatDateTime(new Date(Date.now() + 40 * 60 * 1000))
        
        // 准备更新订单的数据
        const updateData = {
          orderId: this.orderId,
          orderStatus: 3, // 3-待配送
          payTime: payTime, // 支付时间设为当前时间
          orderEstimateTime: estimateTime, // 预计送达时间 = 当前时间 + 40分钟
          queueNum: queueNum // 取餐号
        }
        
        // 调用后端接口更新订单
        const response = await this.updateOrderStatus(updateData)
        
        if (response.code === 200) {
          // 支付成功，更新本地状态
          this.orderStatus = 'pending'
          this.orderInfo.queueNum = queueNum
          this.orderInfo.createTime = payTime
          
          uni.showToast({
            title: '支付成功',
            icon: 'success'
          })
          
          // 刷新订单详情
          this.getOrderDetail()
        } else {
          uni.showToast({
            title: response.msg || '支付失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('支付处理失败:', error)
        uni.showToast({
          title: '支付失败，请重试',
          icon: 'error'
        })
      }
    },
    
    // 生成取餐号（6位：店铺后2位 + 用户后2位 + 当前秒后2位）
    generateQueueNumber() {
      const shopPart = (Number(this.orderInfo.shopId) % 100).toString().padStart(2, '0')
      const userPart = (Number(this.orderInfo.userId) % 100).toString().padStart(2, '0')
      const secPart = (new Date().getSeconds() % 100).toString().padStart(2, '0')
      return `${shopPart}${userPart}${secPart}`
    },

    // 将Date格式化为 yyyy-MM-dd HH:mm:ss
    formatDateTime(dateObj) {
      const pad = (n) => n.toString().padStart(2, '0')
      const y = dateObj.getFullYear()
      const m = pad(dateObj.getMonth() + 1)
      const d = pad(dateObj.getDate())
      const h = pad(dateObj.getHours())
      const mi = pad(dateObj.getMinutes())
      const s = pad(dateObj.getSeconds())
      return `${y}-${m}-${d} ${h}:${mi}:${s}`
    },
    
    // 调用后端接口更新订单状态
    async updateOrderStatus(updateData) {
      try {
        const response = await put('/order/orders', updateData)
        return response
      } catch (error) {
        console.error('更新订单状态失败:', error)
        throw error
      }
    },
    contactService() {
      // 复制客服电话号码到剪贴板
      uni.setClipboardData({
        data: this.servicePhone,
        success: () => {
          uni.showToast({
            title: '电话号码已复制',
            icon: 'success',
            duration: 2000
          })
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'error',
            duration: 2000
          })
        }
      })
    },
    contactService2() {
      // 联系商家功能
      uni.showModal({
        title: '',
        content: `可在手机端拨打 ${this.merchantPhone}`,
        cancelText: '取消',
        confirmText: '复制到剪贴板',
        success: (res) => {
          if (res.confirm) {
            // 复制商家电话号码到剪贴板
            uni.setClipboardData({
              data: this.merchantPhone,
              success: () => {
                uni.showToast({
                  title: '商家电话已复制',
                  icon: 'success',
                  duration: 2000
                })
              },
              fail: () => {
                uni.showToast({
                  title: '复制失败',
                  icon: 'error',
                  duration: 2000
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
	background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  
  .loading-text {
    font-size: 16px;
    color: #666;
  }
}

.payment-reminder {
  background-color: #fff;
  padding: 15px;
  margin: 0px 10px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  
  .reminder-text {
    font-size: 14px;
	font-family: "黑体";
	font-weight: bold;
    color: #090A22;
    margin-bottom: 15px;
    text-align: center;
  }
  .cancel-text {
    font-size: 18px;
  	font-family: "黑体";
  	font-weight: bold;
    color: #090A22;
    margin-bottom: 15px;
    text-align: center;
  }
  .delivery-text {
    font-size: 18px;
  	font-family: "黑体";
  	font-weight: bold;
    color: #090A22;
    margin-bottom: 15px;
    text-align: center;
  }
  
  .action-buttons {
    display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50rpx;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
  }
}

.nav-left::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50rpx;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-left:active::before {
	opacity: 1;
	transform: scale(1);
}

.nav-left:active {
	transform: scale(0.95);
}

.back-icon {
	font-size: 48rpx;
	color: white;
	font-weight: bold;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.order-info-card {
  background-color: #fff;
  margin: 0 10px 10px;
  border-radius: 8px;
  padding: 15px;
  
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    
    .order-number {
      font-size: 12px;
	  font-weight: bold;
    }
    
    .order-time {
      font-size: 12px;
      color: #999;
    }
  }
  
  .product-info {
	min-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    
    .product-detail {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 60px;
      
      .product-name {
		width: 230px;
        font-size: 15px;
		font-weight: bolder;
        margin-bottom: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
      }
      
      .product-desc {
        font-size: 12px;
		font-weight: bold;
		margin-bottom: 5px;
        flex: 1;
      }
	  .shipping-label {
	    font-size: 14px;
	    color: #666;
        margin-top: auto;
	  }
    }
	.quantity {
	  font-size: 14px;
	  font-weight: 1000;
	  color: #666;
	  margin-right: 10px;
	}
    .product-price {
	  min-height: 60px;
	  padding-left: 15px;
      text-align: right;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
      .price {
        font-size: 16px;
        color: #333;
        font-weight: 1000;
        margin-bottom: 5px;
      }
	  .shipping-price {
	    font-size: 14px;
	    color: #333;
        margin-top: auto;
	  }
    }
  }
  
  
  
  .total-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    
    .total-label {
      font-size: 14px;
      flex: 1;
    }
    
    .total-price {
      display: flex;
      align-items: center;
      
      .total-text {
        font-size: 14px;
		font-weight: 700;
        margin-right: 5px;
		margin-left: 5px;
      }
      
      .total-amount {
        font-size: 14px;
        font-weight: bolder;
      }
    }
  }
}

.nav-title {
	font-size: 36rpx;
	font-weight: bold;
	color: white;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

/* 订单状态 */
.status-section {
	background: white;
	margin: 20rpx;
	border-radius: 24rpx;
	padding: 50rpx 30rpx;
	text-align: center;
	box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
}

.status-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
}

.status-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 10rpx;
}

.status-desc {
	font-size: 26rpx;
	color: #7f8c8d;
}

/* 商家信息 */
.merchant-section {
	background: white;
	margin: 20rpx;
	border-radius: 24rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
}

.merchant-header {
	display: flex;
	align-items: center;
}

.merchant-logo {
	width: 70rpx;
	height: 70rpx;
	border-radius: 16rpx;
	margin-right: 25rpx;
	background: #f8f9fa;
}

.merchant-info {
	flex: 1;
}

.merchant-name {
	font-size: 32rpx;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 8rpx;
	display: block;
}

.merchant-phone {
	font-size: 26rpx;
	color: #667eea;
}

.arrow {
	font-size: 32rpx;
	color: #ccc;
}

/* 商品信息 */
.product-section {
	background: white;
	margin: 20rpx;
	border-radius: 24rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
}

.product-item {
	display: flex;
	align-items: center;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 30rpx;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 12rpx;
	display: block;
}

.product-spec {
	font-size: 26rpx;
	color: #7f8c8d;
	background: #f8f9fa;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	display: inline-block;
}

.product-quantity {
	font-size: 28rpx;
	color: #667eea;
	font-weight: 600;
	margin-right: 35rpx;
}

.product-price {
	font-size: 36rpx;
	font-weight: 700;
	color: #e74c3c;
}

/* 订单信息 */
.order-info-section {
	background: white;
	margin: 20rpx;
	border-radius: 24rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
}

.info-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 30rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f8f9fa;
}

.info-item:last-child {
	border-bottom: none;
}

.info-label {
	font-size: 28rpx;
	color: #7f8c8d;
	min-width: 150rpx;
}

.info-value {
	font-size: 28rpx;
	color: #2c3e50;
	flex: 1;
	text-align: right;
	word-break: break-all;
}

/* 底部操作按钮 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	padding: 30rpx;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 20rpx;
}

.action-btn {
	flex: 1;
	height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: 600;
	border: 2rpx solid #e9ecef;
	background: white;
	color: #6c757d;
	transition: all 0.3s ease;
}

.action-btn.primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-color: #667eea;
	box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
}

.action-btn.secondary {
	background: #f8f9fa;
	color: #667eea;
	border-color: #667eea;
}

.action-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
</style>